<template>
	<view class="content bgf" @click="closeAll">
		
		<u-navbar :is-back="false">
			<view style="height: 10px;"></view>
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
				<view class="slot-wrap-left">
					<image src="/static/image/logo.png" style="width:50rpx;height: 50rpx;"></image>
				</view>
				<view class="slot-wrap-center mt10">消息</view>
                <view class="slot-wrap-right pr">
					<view class="mr20" @click.stop="topDropDown"><u-icon name="plus"  size="44"></u-icon></view>
					<view v-if="topDropDownShow" class="pa plus_mores" :style="'top:'+(topRange-45)+'px;'">
						<view class="triangle-up"></view>
						<view  @click="goPage" data-uri="/pages/sign-in/sign-in" class="colccc" style="border-bottom: 1px solid #333333;padding:10px;">
							<u-icon name="wodekaoqin" custom-prefix="qxl-icon" color="#cccccc" size="38"></u-icon>
							<text>我要签到</text>
						</view>
						<view @click="goPage" data-uri="/pages/add-friend/add-friend" class="colccc" style="border-bottom: 1px solid #333333;padding:10px;">
							<u-icon name="man-add-fill" size="44"></u-icon>
							<text>添加朋友</text>
						</view>
						<view @click="goPage" data-uri="/pages/create-group/create-group" class="colccc" style="padding:10px;">
							<u-icon name="kehuqunzu" custom-prefix="qxl-icon" style="position: relative;top:2px;right:2px;" size="44"></u-icon>
							<text>发起群聊</text>
						</view>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<!--网络检测-->
		<check-network v-if="$vuex.state.globalData.netStateChange == 2" 
		:info="$vuex.state.globalData.netStateChange == 0 ? '正在重试网络连接请稍后...' : ''" height="36"/>
		<!--检测网络结束-->
		
		<view class="main" @click="closeAll">
			
			<view 
			v-for="(item,index) in $vuex.state.globalData.conversationList" :key="item.conversationID" 
			class="disf f30 pr"
			:data-conversationid="item.conversationID" :data-index="index"
			@touchstart="handleTouchStart" @touchend="handleTouchEnd">
			    <!--系统消息通知-->
				<view v-if="item.type == '@TIM#SYSTEM'" class="pt40 pl30 pb10 pr30">
					
				</view>
				<!--会话通知-->
				<view v-else @click="jumpChat" :data-type="item.type" :data-to="item.userProfile ? item.userProfile.userID : item.groupProfile.groupID" :data-conversationid="item.conversationID" :data-nick="item.userProfile ? item.userProfile.nick : item.groupProfile.name" class="pt40 pl30 pb10 pr30">
					<!--<image :src="item.userProfile.avatar" style="width:85rpx;height: 85rpx;"></image>-->
					<view class="pr">
						<view  style="width: 82rpx;height: 82rpx;overflow: hidden;border-radius:4px;">
							<u-image width="85rpx" height="85rpx" :src="item.userProfile ? item.userProfile.avatar : item.groupProfile.avatar">
								<template v-slot:error>
									<image src="/static/image/default-user.png" style="width:85rpx;height: 85rpx;"></image>
								</template>
							</u-image>
							
						</view>
						<view v-if="item.unreadCountString" class="subscript-num">{{item.unreadCountString}}</view>
					</view>
				</view>
				<view @click="jumpChat" :data-type="item.type" :data-to="item.userProfile ? item.userProfile.userID : item.groupProfile.groupID" :data-conversationid="item.conversationID" :data-nick="item.userProfile ? item.userProfile.nick : item.groupProfile.name" class="pt30 bbo" style="width: 600rpx;">
					<view class="f34 disfr-lr">
						<view>{{item.userProfile ? item.userProfile.nick : item.groupProfile.name}}</view>
						<view class="f28 col999 mr10">{{item.lastMessage.lastTimeString}}</view>
					</view>
					<view class="col999 mt5 f28 toell">{{item.lastMessage.messageForShow}}</view>
				</view>
				
				<view v-if="showIndex == index" class="pa convers-tool">
					<view v-if="item.isPinned" @click="pinConversation" :data-id="item.conversationID" :data-type="false" class="pv25 conv-bor">取消置顶</view>
					<view v-else @click="pinConversation" :data-id="item.conversationID" :data-type="true" class="pv25 conv-bor">消息置顶</view>
					<!--<view class="pv25 conv-bor">消息免打扰</view>-->
					<view v-if="item.unreadCount > 0" @click="readConverset" :data-id="item.conversationID" class="pv25 conv-bor">标记已读</view>
					<view v-else class="pv25 conv-bor" style="color:#666666">标记已读</view>
					<view @click="deleteConversation" :data-id="item.conversationID" class="pv25">删除聊天</view>
				</view>
				
			</view>
			
		</view>
		
		<!--无记录时显示-->
		<view v-if="$vuex.state.globalData.conversationList.length <= 0 && $vuex.state.globalData.isSyncCompleted" 
		    style="margin-top: 40%;padding-left: 95rpx;">
			<u-icon name="queshengyewuliaotianjilu" custom-prefix="qxl-icon" color="#eeeeee" size="300"></u-icon>
		</view>
		
		<loading :loading="$vuex.state.globalData.isSyncCompleted == true && !($vuex.state.globalData.conversationList.length <= 0)"/><!--加载状态-->
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		
	    <u-tabbar v-model="$vuex.state.globalData.tabBar.current" 
		:list="$vuex.state.globalData.tabBar.list" active-color="#2979ff" 
		:mid-button="false"></u-tabbar><!--自定义底部导航-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const page_load=ref(false);
const next_page=ref(null);
const list=ref([]);
const title=ref('');
const topRange=ref(uni.$utils.getTopSecureRange());
const time=ref(parseInt(new Date().getTime() / 1000));
//页面加载时
onLoad(async (options)=>{

});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
//下拉更新
onPullDownRefresh(()=>{
	console.log('onPullDownRefresh');
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
async function loadPage(options,isPage){
	/*let ret = await uni.$get('index/index',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}*/
	show_main.value=true;
	not_load.value=true;
	page_load.value=false;
	/*next_page.value=ret.data.next_page;
	let listData=ret.data.list;
	if(isPage) listData=list.value.concat(listData);
	list.value=listData;*/
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	topDropDownShow.value=false;
	uni.$utils.dataSetPage(event);
};
//关闭全部
const closeAll=()=>{
	topDropDownShow.value=false;
	showIndex.value=-1;
};
///////////////////////////////
//顶部右边菜单
const topDropDownShow=ref(false);
const topDropDown=()=>{
	topDropDownShow.value=!topDropDownShow.value;
};
//////////////////////////////
//长按事件
const timeout=ref(null);
const showIndex=ref(-1);
const listToolStyle=ref('');
const systemInfo = uni.getSystemInfoSync();
const handleTouchStart=(e)=>{
      // 清除之前的定时器（如果有的话）并设置一个新的定时器，用于判断是否为长按
      clearTimeout(timeout.value);
      timeout.value = setTimeout(() => {
         handleLongPress(e); // 长按事件处理函数
      }, 500); // 假设长按的判定时间为500毫秒
    };
const handleTouchEnd=()=>{
      // 用户手指离开屏幕时清除定时器，避免误判为长按
      clearTimeout(timeout.value);
}
const handleLongPress=(e)=>{
	showIndex.value=e.currentTarget.dataset.index;
	let top = systemInfo.platform == 'ios' ? 44 : 48;
	let windowWidth=systemInfo.windowWidth;
	let windowHeight=systemInfo.windowHeight-top;
	let touches= e.touches[0];
	let style='';
	if (touches.clientY > (windowHeight / 2)) {
		 style = 'top:-260rpx;';
		} else {
		  style = 'top:50px;';
	}
	listToolStyle.value=style;
};
//////////////////////////////
// 跳转聊天
const jumpChat=(e)=>{
	let type=e.currentTarget.dataset.type;
	let conversationID=e.currentTarget.dataset.conversationid;
	let nick=e.currentTarget.dataset.nick;
	let to=e.currentTarget.dataset.to;
	if(nick) nick=encodeURIComponent(nick);
	let uri='/pages/chat-group/chat-group?conversationID='+conversationID+'&nick='+nick+'&to='+to;
	if(type == 'C2C') uri='/pages/chat-single/chat-single?conversationID='+conversationID+'&nick='+nick+'&to='+to;
	//console.log(uri);return;
	uni.$utils.goPage(uri,0);
};
// 置顶/取消置顶会话
const pinConversation=(e)=>{
	let conversationID=e.currentTarget.dataset.id;
	let type=e.currentTarget.dataset.type;
	uni.TIM.pinConversation(conversationID,type);
};
//设置已读会话
const readConverset=(e)=>{
	let conversationID=e.currentTarget.dataset.id;
	uni.TIM.setMessageRead(conversationID);
};
//删除会话
const deleteConversation=(e)=>{
	let conversationID=e.currentTarget.dataset.id;
	uni.TIM.deleteConversation(conversationID);
};
</script>

<style  lang="scss">
	page {
		background: #fff;
	}
	.slot-wrap-right{margin-top: 5px;;}
    .slot-wrap-right .plus_mores{
		right:20rpx;
		height: 140px;
		width:120px;
		background:#222;
		z-index:9999;
		border-radius: 4px;
	}
	.slot-wrap-right .triangle-up {
	    position: absolute;
		right: 5px;
		top:-8px;
	    width: 0; /* 伪元素宽度 */
	    height: 0; /* 伪元素高度 */
	    border-left: 7px solid transparent; /* 左边框透明 */
	    border-right: 7px solid transparent; /* 右边框透明 */
	    border-bottom: 10px solid #333; /* 底部边框为三角形颜色和大小 */
	  }
	  .subscript-num{
		  width: 46rpx;
		  height: 40rpx;
		  line-height: 40rpx;
		  border-radius: 48%;
		  padding:0 8rpx 0 5rpx;
		  background: red;
		  color:#fff;
		  text-align: center;
		  font-size: 20rpx;
		  position:absolute;
		  top:-20rpx;
		  right:-20rpx;
	  }
	  .convers-tool{
		  width: 200rpx;
		  height: 280rpx;
		  background:#222;
		  z-index:9999;
		  border-radius: 4px;
		  left:38%;
		  top:70rpx;
		  text-align: center;
		  color:#ccc;
		  font-size: 30rpx;
	  }
	  .convers-tool .conv-bor{
		  border-bottom: 1px solid #333;
	  }
</style>
